<template>
    <el-dialog v-model="dialogVisible" title="项目信息" append-to-body>
        <!-- 弹出窗口的内容 -->
        <el-form label-width="200px" :inline="true" class="porjectFormRef">
            <el-form-item label="项目名称" prop="projectName" class="w-[45%]">
                <el-input v-model="project.projectName" placeholder="请输入项目名称" />
            </el-form-item>
            <el-form-item label="受理部门" prop="acceptanceDepartment" class="w-[45%]">
                <el-input v-model="project.acceptanceDepartment" />
            </el-form-item>

            <el-form-item label="项目关键要素" prop="projectKey" class="w-[80%]">
                <el-input
                    v-model="project.projectKey"
                    placeholder="请输入项目关键要素"
                    type="textarea"
                    :autosize="{ minRows: 4, maxRows: 6 }"
                />
            </el-form-item>
            <el-form-item label="核心要素" prop="keyElement" class="w-[80%]">
                <el-input
                    v-model="project.keyElement"
                    placeholder="请输入核心要素"
                    type="textarea"
                    :autosize="{ minRows: 4, maxRows: 6 }"
                />
            </el-form-item>

            <el-form-item class="w-[80%]" label="申报条件">
                <div class="mt-2">
                    <el-tag
                        v-for="(item, index) in project.declarationConditions"
                        :key="index"
                        closable
                        class="mr-2 tag-with-ellipsis"
                        :title="item.andsqlName"
                    >
                        {{ item.andsqlName }}
                    </el-tag>
                </div>
            </el-form-item>

            <el-form-item label="申报时间" prop="declarationTime" class="w-[45%]">
                <el-date-picker
                    v-model="project.declarationTime"
                    type="daterange"
                    value-format="YYYY-MM-DD"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :size="size"
                />
            </el-form-item>
            <el-form-item label="资助额度" prop="amountSubsidy" class="w-[45%]">
                <el-input-number v-model="project.amountSubsidy" :min="1" />
                &nbsp;&nbsp;万
            </el-form-item>
            <el-form-item label="三星条数" prop="ratingThree" class="w-[45%]">
                <el-input-number v-model="project.ratingThree" :min="1" :max="30" />
            </el-form-item>

            <el-form-item label="四星条数" prop="ratingFour" class="w-[45%]">
                <el-input-number v-model="project.ratingFour" :min="1" :max="30" />
            </el-form-item>

            <el-form-item label="五星条数" prop="ratingFive" class="w-[45%]">
                <el-input-number v-model="project.ratingFive" :min="1" :max="30" />
            </el-form-item>
        </el-form>

        <!-- 弹出窗口的底部操作按钮 -->
        <template #footer>
            <el-button @click="closeDialog()">取消</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { defineProps, defineEmits, watch } from 'vue'

const props = defineProps({
    project: {
        required: true
    },
    visible: { type: Boolean, required: true }
})

// 定义触发的自定义事件
const emits = defineEmits(['update:visible'])

// 使用 ref 创建响应式变量，用于控制对话框的显示状态
const dialogVisible = ref(props.visible)

// 监听 props.visible 的变化，同步到 dialogVisible
watch(
    () => props.visible,
    (newValue) => {
        dialogVisible.value = newValue
    }
)

// 关闭对话框的方法
const closeDialog = () => {
    dialogVisible.value = false
    emits('update:visible', false)
}
</script>

<style scoped>
.checkbox {
    display: flex;
    align-items: center;
}

.checkbox span {
    margin-left: 10px;
}

.bordered-checkbox {
    padding: 10px;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
